<template>
    <el-card class="!border-none" shadow="never">
        <el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true">
            <el-form-item>
                <el-input
                    class="w-[280px]"
                    v-model="queryParams.name"
                    placeholder="班级名称"
                    clearable
                    @keyup.enter="resetPage"
                ></el-input>
            </el-form-item>

            <el-form-item>
                <el-select
                    style="width: 280px"
                    v-model="queryParams.college_id"
                    placeholder="关联院校"
                >
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </el-form-item>

            <el-form-item>
                <daterange-picker
                    class="w-[280px]"
                    placeholder="以创建时间范围筛选"
                    v-model:startTime="queryParams.created_start_date"
                    v-model:endTime="queryParams.created_end_date"
                ></daterange-picker>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="resetPage">
                    <div>
                        <!-- <span class="search_btn_icon"> </span> -->
                        查询
                    </div>
                </el-button>
                <el-button @click="resetParams">
                    <div>
                        <!-- <span class="reset_btn"></span> -->
                        重置
                    </div>
                </el-button>
            </el-form-item>
        </el-form>
    </el-card>
    <el-card class="!border-none" shadow="never">
        <el-button type="primary" @click="addUser"
            ><span class="add_btn_icon"></span> 添加班级</el-button
        >

        <el-table stripe class="mt-2" size="large" v-loading="pager.loading" :data="pager.lists">
            <el-table-column label="班级名称" prop="name" min-width="150"></el-table-column>
            <el-table-column label="班级描述" prop="describe" min-width="150"></el-table-column>
            <el-table-column label="关联院系" prop="classes_num" min-width="150">
                <template #default="{ row }">
                    {{ row.college.name }}
                </template>
            </el-table-column>
            <el-table-column
                label="关联学生（个）"
                prop="student_num"
                min-width="130"
            ></el-table-column>
            <el-table-column label="创建时间" prop="created_at" width="180"></el-table-column>

            <el-table-column label="操作" min-width="150" fixed="right">
                <template #default="{ row }">
                    <div class="flex items-center">
                        <el-button plain type="primary" @click="handleView(row)" link>
                            <!-- <span class="view_btn_icon"> </span> -->
                            详情
                        </el-button>
                        <el-button plain type="primary" @click="handleEdit(row)" link>
                            <!-- <span class="deilt_btn_icon"> </span> -->
                            编辑
                        </el-button>

                        <el-button plain type="danger" @click="handleDelete(row.id)" link>
                            <!-- <span class="delect_btn_icon"></span> -->
                            删除
                        </el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <div class="flex justify-end mt-4">
            <pagination
                v-model="pager"
                @change="getLists"
                background="red"
                layout="prev, pager, next, sizes"
            ></pagination>
        </div>
    </el-card>

    <add-user-pop
        v-if="popShow"
        ref="addUserPopRef"
        @close="popClose"
        @confirm="popConfirm"
        :type="popType"
    ></add-user-pop>
</template>
<script lang="ts" setup name="consumerLists">
import { usePaging } from '@/hooks/usePaging'
import { getClassList, delClass, getDepartmentList } from '@/api/consumer'
import feedback from '@/utils/feedback'
import addUserPop from '../modals/addUserPop.vue'
import { useRequest } from 'vue-hooks-plus'

const router = useRouter()

//弹框ref
const addUserPopRef = shallowRef()
const popShow = ref(false)

// 弹窗类型
const popType = ref('')

const queryParams = reactive({
    name: '',
    created_start_date: '',
    created_end_date: '',
    college_id: ''
})

const isSelect = ref<number[]>([])

const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: getClassList,
    params: queryParams
})

// 获取学院列表配置
const { data: options } = useRequest(async () => {
    const _res = await getDepartmentList({ page_no: 1, page_size: 9999 })
 
    return _res?.lists?.map((item: any) => {
        return {
            label: item.name,
            value: item.id
        }
    })
})
//打开创建用户弹框
const addUser = async () => {
    popShow.value = true
    await nextTick()
    addUserPopRef.value.open()
}

//删除
const handleDelete = async (id: number[] | number) => {
    await feedback.prompt(`是否确定删除该班级？`, `操作确认`, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputType: 'textarea',
        inputPlaceholder: '请输入备注',
        callback: async ({ action, value }: any) => {
            if (action == 'confirm') {
                console.log('确认了')
                try {
                    await delClass({ id, remark: value })

                    getLists()
                } catch (error) {}
            } else {
            }
        },
        type: 'warning'
    })
}

// 编辑
const handleEdit = async (data: any) => {
    popShow.value = true
    await nextTick()
    addUserPopRef.value.open()
    addUserPopRef.value.setFormData({ ...data })
}

//多选
const handleSelectionChange = (value: any) => {
    isSelect.value = value.map((item: any) => item.id)
}

// 查看详情
const handleView = async (data: any) => {
    popShow.value = true
    popType.value = 'view'
    await nextTick()
    addUserPopRef.value.open()
    addUserPopRef.value.setFormData({ ...data })
}

//弹框关闭
const popClose = () => {
    popShow.value = false
    popType.value = ''
}

const popConfirm = () => {
    getLists()
    popShow.value = false
    popType.value = ''
}

onActivated(() => {
    getLists()
})

getLists()

// 路由跳转
const gotoDeatil = () => {
    router.push('/user/student/detail')
}
</script>

<style lang="scss" scoped></style>
